<template>
	<view class="bgimg1 flex flex-column">
		<u-navbar leftIconSize="20px" leftIconColor="#ffffff" titleStyle="color:#ffffff" title="Register" :autoBack="false"
			bgColor="transparent" @leftClick="leftClick">
		</u-navbar>
		<u-gap height="150" bgColor="transparent"></u-gap>
		<view class="p-5 bg-white rounded-top-max-lg">
			<view class="flex flex-column mb-4">
				<text class="fs-26 text-black mb-2">{{$t('hhh.t27')}}</text>
				<view class="bgF6F7F9 rounded-circle px-2 py-1">
					<u--input :placeholder="$t('hhh.t36')" border="surround" v-model.trim="email" :customStyle="{
						'border':0
					}"></u--input>
				</view>
			</view>
			<view class="flex flex-column mb-4">
				<text class="fs-26 text-black mb-2">{{$t('hhh.t28')}}</text>
				<view class="bgF6F7F9 rounded-circle px-2 py-1">
					<u--input :placeholder="$t('hhh.t37')" v-model.trim="code" :customStyle="{
						'border':0
					}">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="20" changeText="XS" :startText="$t('hhh.t29')"
								:endText="$t('hhh.t147')"></u-code>
							<u-button class="sendmsg" @tap="getCode" :text="tips" size="mini" color="transparent"
								:customStyle="{'border':0,'color':'#110124'}"></u-button>
						</template>
					</u--input>
				</view>
			</view>
			<view class="flex flex-column mb-4">
				<text class="fs-26 text-black mb-2">{{$t('hhh.t30')}}</text>
				<view class="bgF6F7F9 rounded-circle px-2 py-1">
					<u--input :placeholder="$t('hhh.t38')" border="surround" v-model.trim="phone" :customStyle="{
						'border':0
					}"></u--input>
				</view>
			</view>
			<view class="flex flex-column mb-4">
				<text class="fs-26 text-black mb-2">{{$t('hhh.t207')}}</text>
				<view class="bgF6F7F9 rounded-circle px-2 py-1">
					<u--input :placeholder="$t('hhh.t208')" border="surround" v-model.trim="club_code" :customStyle="{
						'border':0
					}"></u--input>
				</view>
			</view>
			<u-gap height="100" bgColor="transparent"></u-gap>
			<view class="flex align-center justify-center donebtn mx-auto text-white fs-28 font-weight-bold" @tap="submitFn">
				{{$t('hhh.t179')}}
			</view>
			<u-gap height="100" bgColor="transparent"></u-gap>
			<view class="flex justify-center mx-5 pb-4">
				<text class="w-32 h-32  check" :class="checked?'checked':''" @tap="checked = !checked"></text>
				<view class="ft333333 fs-22 flex  flex-wrap ml-1">
					<text class="text-ellipsis mr-1">{{$t('hhh.t32')}}</text> 
					<text class="flex text-ellipsis mr-1 ft1877F2" style="max-width: 200rpx;"
						@tap="navTo(`/pages/userAgreement/userAgreement-${lang}`)">《{{$t('hhh.t33')}}》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import HttpApi from '@/api/httpApi';
	export default {
		data() {
			return {
				tips: '',
				email: "",
				code: "",
				phone: '',
				club_code: '',
				checked: true
			}
		},
		onLoad(query) {
			this.club_code = query.code || ''
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (!this.email) {
					uni.$u.toast(this.$t('hhh.t41'));
					return
				}
				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				if (!emailRegex.test(this.email)) {
					uni.$u.toast(this.$t('hhh.t42'));
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: this.$t('hhh.t43')
					})
					HttpApi.sendEmailCode({
						email: this.email,
						type: 'register',
					}).then(res => {
						console.log(res)
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						if (res.code === 1) {
							uni.$u.toast(this.$t('hhh.t44'));
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}
					})
				} else {
					uni.$u.toast(this.$t('hhh.t45'));
				}
			},
			submitFn() {
				if (!this.email) {
					uni.$u.toast(this.$t('hhh.t41'));
					return
				}
				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				if (!emailRegex.test(this.email)) {
					uni.$u.toast(this.$t('hhh.t42'));
					return
				}
				if (!this.code) {
					uni.$u.toast(this.$t('hhh.t46'));
					return
				}
				if (!this.phone) {
					uni.$u.toast(this.$t('hhh.t48'));
					return
				}
				if (!this.club_code) {
					uni.$u.toast(this.$t('hhh.t206'));
					return
				}
				uni.$tools.showLoading()
				HttpApi.register({
					email: this.email,
					code: this.code,
					phone: this.phone,
					club_code: this.club_code
				}).then(res => {
					if (res.code === 1) {
						uni.showToast({
							title: this.$t('hhh.t49')
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/login/login'
							})
						}, 1500)
					}
				}).finally(() => {
					uni.hideLoading()
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>